<script>
export default {
  name: "FloatButton",
  methods: {
    show() {
      this.$refs.dropdown.classList.toggle("show-dropdown")
    }
  },
  mounted() {
  }
}
</script>

<template>
  <div class="float-container">
    <div class="dropdown" ref="dropdown">
      <div class="float__button" @click="show">
        <div class="float__button__wrap">
        <span class="float__button__icon">
            <svg xmlns="http://www.w3.org/2000/svg" color="#fff" height="24" viewBox="0 -960 960 960" width="24">
                <path
                    d="m480-80-10-120h-10q-142 0-241-99t-99-241q0-142 99-241t241-99q71 0 132.5 26.5t108 73q46.5 46.5 73 108T800-540q0 75-24.5 144t-67 128q-42.5 59-101 107T480-80Zm80-146q71-60 115.5-140.5T720-540q0-109-75.5-184.5T460-800q-109 0-184.5 75.5T200-540q0 109 75.5 184.5T460-280h100v54Zm-101-95q17 0 29-12t12-29q0-17-12-29t-29-12q-17 0-29 12t-12 29q0 17 12 29t29 12Zm-29-127h60q0-30 6-42t38-44q18-18 30-39t12-45q0-51-34.5-76.5T460-720q-44 0-74 24.5T344-636l56 22q5-17 19-33.5t41-16.5q27 0 40.5 15t13.5 33q0 17-10 30.5T480-558q-35 30-42.5 47.5T430-448Zm30-65Z"/>
            </svg>
        </span>
          <span class="float__button__text">
            帮助中心
        </span>
        </div>
      </div>

      <div class="dropdown__menu">
        <div class="dropdown__menu__header">
          <div style="flex: 1">Hi，让我来帮助你吧~</div>
          <div style="flex: 1;text-align: right"><i class="el-icon-close"></i></div>
        </div>
        <div style="padding: 8px 16px">
          <div class="dropdown__menu__search">
            <i class="el-icon-search"></i>
            <input placeholder="输入关键词，搜索你遇到的问题">
            <div>搜索</div>
          </div>
        </div>
        <div class="dropdown__menu__content">
          <ul>
            <li class="dropdown__item" v-for="n in 20" :key="n">
              <i class="el-icon-apple dropdown__icon"></i>
              <span class="dropdown__name">Options</span>
            </li>
          </ul>
        </div>
        <div class="dropdown__menu__footer">
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@primaryColor: #cf3a29;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

ul {
  list-style: none;
}

.float-container {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 999;

  .dropdown {
    position: relative;
    width: max-content;

    .float__button {
      width: 44px;
      height: 44px;
      border-radius: 44px;
      background: @primaryColor;
      transition: width 0.2s ease;
      user-select: none;
      cursor: pointer;
      box-shadow: 2px 8px 15px 0 rgba(29, 134, 240, .2);

      .float__button__wrap {
        width: 114px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        .float__button__icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 44px;
          height: 44px;
        }

        .float__button__text {
          display: flex;
          align-items: center;
          width: calc(114px - 44px);
          height: 44px;
          font-size: 14px;
          color: #ffffff;
          transform: translateX(-1px);
        }
      }
    }

    .dropdown__menu {
      background: #fff linear-gradient(180deg, rgba(207, 58, 41, .3), #fff 92px, #fff);
      border-radius: 12px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);
      display: grid;
      position: absolute;
      width: 440px;
      right: 0;
      bottom: 3.4rem;
      transform: scale(0);
      transform-origin: 10rem -2rem;
      pointer-events: none;
      transition: opacity .4s, transition .4s;
      opacity: 0;

      .dropdown__menu__header {
        height: 52px;
        font-weight: 600;
        color: #0e1114;
        font-size: 16px;
        line-height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 8px 16px;
      }

      .dropdown__menu__search {
        height: 42px;
        background: #ffffff;
        border: 1px solid transparent;
        border-radius: 7px;
        box-shadow: 0 12px 14px 0 rgba(207, 58, 41, .12);
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        padding: 0 8px;

        input {
          margin-left: 8px;
          outline: none;
          border: none;
          line-height: 24px;
          font-size: 14px;
        }

        div {
          position: absolute;
          right: 16px;
          cursor: pointer;
          color: @primaryColor;
          font-size: 14px;
        }
      }

      .dropdown__menu__content {
        padding: 8px 16px;
        margin-top: 8px;
        height: 394px;
        overflow-y: auto;
      }

      .dropdown__menu__content::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      .dropdown__menu__content::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 100px;
        background-color: rgba(0, 0, 0, .1);
        background-clip: content-box;
      }

      .dropdown__menu__footer {
        box-sizing: border-box;
        border-top: 1px solid #f0f2f5;
        height: 50px;
        border-radius: 0 0 10px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .dropdown__item {
        display: flex;
        align-items: center;
        column-gap: .5rem;
        margin: 8px 0;
        cursor: pointer;
        transition: color .3s;
        user-select: none;
      }

      .dropdown__item:hover {
        color: @primaryColor;
      }
    }
  }
}

.show-dropdown .dropdown__menu {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: initial !important;
}

.show-dropdown .float__button {
  width: 114px !important;
}
</style>